<script setup>
import { computed } from 'vue'

const props = defineProps({
  name: String,
  imageFolder: { // 指定static/images路径下的图片目录
    type: String,
    default: ''
  },
  size: {
    type: Number,
    default: 0
  },
  customStyle: {
    type: Object,
    default: () => ({})
  }
})
const emit = defineEmits(['click'])
const styles = computed(() => ({ width: `${props.size}px`, height: `${props.size}px`, ...props.customStyle }))
const imagePath = computed(() => `../../static/images/${props.imageFolder ? props.imageFolder + '/' : props.imageFolder}${props.name}.svg`)
</script>

<template>
  <view class="icon-line-container" :style="styles" @click="($event) => emit('click', $event)">
    <image :src="imagePath" :style="styles"></image>
  </view>
</template>

<style scoped lang="scss">
.icon-line-container {
  font-size: 0;
  display: inline-block;
  vertical-align: middle;
}
</style>
